.block-top-contributors {
  --w: span 4;
  --h: span 4;
  --fd: column;
  --ai: stretch;
  --p: 1rem;

  &.block {
    padding-bottom: 1rem;
  }

  &.block--4x4.block--b {
    .block-chart {
      &__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: column;
        grid-template-rows: repeat(5, 1fr);

        padding-bottom: 0;
        column-gap: 1rem;
        row-gap: 0.75rem;
        overflow: hidden;
      }
      &__item {
        padding-left: 0.9375rem;
        column-gap: 0.375rem;
        &:first-child {
          .block-chart__img {
            img {
              width: 1.75rem;
            }
          }
        }
        &:before {
          left: -0.3125rem;
          font-size: 0.75rem;
          line-height: 0.9375rem;
          width: 2ch;
          text-align: right;
        }
      }
      &__expand {
        margin-top: 1rem;
        &:before {
          content: none;
        }
      }
      &__img {
        img {
          width: 1.75rem;
        }
      }
      &__info {
        font-size: 0.75rem;
        line-height: 0.9375rem;

        a {
          text-wrap: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: block;
        }
      }
      &__details {
        font-size: 0.6875rem;
        line-height: 0.875rem;
      }
    }
  }

  &.block--2x2 {
    --p: 0.75rem;
    --jc: space-between;

    .block-chart {
      &__header {
        flex-direction: column;
        margin-bottom: 0;
        h3 {
          font-size: 0.75rem;
        }
        select {
          position: absolute;
          bottom: var(--p);
          right: var(--p);
        }
      }

      &__list {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 0.375rem;
        row-gap: 0;
        margin: 0;
        padding: 0;
        align-items: center;
      }

      &__expand {
        margin-top: 0.375rem;
        padding: 0;
        border: none;
        justify-content: flex-start;
      }

      &__item {
        &:before {
          content: "";
        }
        padding-left: 0;
        width: auto;
        &:first-child {
          width: 100%;
          justify-content: center;
          .block-chart__img {
            img {
              width: 2rem;
            }
          }
        }
        &:nth-child(n + 4) {
          display: none;
        }
        &:not(:first-child) {
          .block-chart__details {
            display: none;
          }
        }
      }

      &__img {
        img {
          width: 2rem;
        }
      }

      &__info {
        display: none;
      }
      &__title {
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &__details {
        font-size: 0.6875rem;
      }
    }
  }
}
